<template>
	<!-- 客户时间轴 -->
	<view class="home">
		<view class="head">
			<navigator class="goBack" open-type="navigateBack">
				<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
				客群时间轴
			</navigator>
		</view>
		<view class="Item" v-if="notMore">
			<view class="search">
				<view style="display: flex;align-items: center;justify-content: center; color: #ccc;width: 100%;height: 60rpx;"  v-if="!goSearch" @click="goSearch=true">
					<image src="/static/img/search.png" style="width: 35rpx; height: 35rpx;margin-right: 20rpx;" mode="aspectFit" />
					搜索
				</view>
				<u-input v-model="searchKeyWord" @blur="goSearch=false" v-if="goSearch" style="width: 80%;margin: auto;" placeholder="请输入关键字"  type="text" :border="false" />
			</view>
			
			<view class="title"  style="margin-left: 20rpx;">
				<titleRow style="margin-left: 20rpx;" :titleName="titleName2"></titleRow>
				
			</view>
			<view class="dataArr">
					<scroll-view  style="height: 870rpx;" scroll-y="true"  >
						<!-- <view class="dataItem" v-for="(item1,index1) in customersArr" :key="index1"> -->
						<view class="dataItem" v-for="(item1,index1) in customerList" :key="index1">
							<view class="date">
								{{item1.date}}
							</view>
							<view class="userList">
								<view class="userItem" v-for="(item2,index2) in item1.userList" :key="index2">
									<view @click="goDetail(index2)" class="cover">
										<image :src="item2.follow_info.avatar" mode=""></image>
									</view>
									<view class="content"  @click="goDetail(index2)">
										<view class="name">
											{{item2.external_contact.name}}
										</view>
										<view class="labelArr">
											<!-- <dropDownWindow @changeShowListData="changeLabels" ref="dropDownWindowRef" :inputArr=" item2.labels" :type="windowType" :index1="index1" :index2="index2"  ></dropDownWindow> -->
											<dropDownWindow @changeShowListData="changeLabels" ref="dropDownWindowRef" :inputArr="item2.labels" :type="windowType" :index1="index1" :index2="index2"  ></dropDownWindow>
										</view>
									</view>
									<view class="addBtn" @click="showModal(index1,index2)">
										{{item2.labels.length>0 ? '修改标签':'添加标签'}}
										<u-icon name="arrow-right" style="margin-left: 15rpx;" color="#888888" size="28"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
			</view>
		</view>
		
		
		<view class="Item"  v-if="!notMore">
			<view class="title" style="margin-left: 20rpx;">
				<titleRow style="margin-left: 20rpx;" :titleName="titleName1"></titleRow>
				
			</view>
			<view class="noContent">
				<image src="../../static/img/didNotCreate2.png" mode="aspectFill"></image>
				<text style="margin-top: 30rpx;"> 你还没有创建群聊哦~</text>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import titleRow from '@/component/titleRow/titleRow.vue'
	import dropDownWindow from '@/component/dropDownWindow/dropDownWindow'
	export default {
		data() {
			return {
				windowType : 2 ,
				titleName1:'共0个群聊',
				titleName2:'客户列表',
				notMore:true,
				searchKeyWord:'',
				goSearch:false,
				customersArr:[
					{
						date:'2021-08-21',
						userList:[
							{
								name:'张三',
								labels:['企业老板','合作过','重要']
							},
							{
								name:'张4',
								labels:[]
							},
							{
								name:'张5',
								labels:['企业老板','合作过','机会']
							},
						]
					},
					{
						date:'2021-08-20',
						userList:[
							{
								name:'张6',
								labels:['企业老板','合作过','机会']
							},
							{
								name:'张7',
								labels:['企业老板','合作过','机会']
							},
							{
								name:'张8',
								labels:['企业老板','合作过','机会']
							},
						]
					},
				
						
				],
				customerList:[],
			};
		},
		methods:{
			async getLabelArr(){
				let res = await this.myhttp({
					method:'GET',
					url:'api/Label/getList',
				}).then(res=>{
					if(res.data.code==1){
						let arr = res.data.data.tag_group
						this.vuex.dispatch('getPullDownLabel',arr)
						// console.log(this.vuex.state.pullDownLabel);
					}
				})
			},
			filtrationLabel(arr,_type){
				// let arr =['etquFVCwAAqKCj_mymBRerbTLxICo2WA']
				// console.dir(this.vuex.state.pullDownLabel);
				let labelTextArr = []
				if(!_type){
					this.vuex.state.pullDownLabel.forEach((item)=>{
						item.tag.forEach(item2=>{
							arr.forEach(item3=>{
								if(item2.id==item3){
									labelTextArr.push(item2.name)
								} 
							})
							
						})
					})
				}else{
					this.vuex.state.pullDownLabel.forEach((item)=>{
						item.tag.forEach(item2=>{
							arr.forEach(item3=>{
								if(item2.name==item3){
									labelTextArr.push(item2.id)
								} 
							})
							
						})
					})
				}
				
				// console.dir(labelTextArr)
				return labelTextArr
			},
			async getCustomersArr(){
				let res = await this.myhttp({
					url:'api/Xlqwapi/Externalcontact',
					method:'GET',
					data:{
						limit:'10',
					},
				}).then(res=>{
					if(res.data.code==1){
						// this.customerList = res.data.data.data
						let resArr = res.data.data.data
						console.dir(resArr)
						
						resArr.forEach((item,index)=>{
							if(item.follow_info.tag_id.length != 0 ){
								let labelArr = this.filtrationLabel(item.follow_info.tag_id)
								resArr[index].labels = labelArr
							}
							
							let listIndex = this.customerList.findIndex(item2=>{
								return item2.date == item.follow_info.createtime
							})
							if(listIndex == -1){
								let customerListItem = {
									date: item.follow_info.createtime,
									userList:[]
								}
								customerListItem.userList.push(item)
								this.customerList.push(customerListItem)
							}else{
								this.customerList[listIndex].userList.push(item)
							}
						})
						console.dir(this.customerList)
					}else{
						this.$refs.uToast.show({
								title: '获取失败',
								type: 'error',
						})
					}
				})
				
			},
			goDetail(_id){
				return
				uni.navigateTo({
					url:`../timelineDetail/timelineDetail?id=${_id}`
				})
			},
			showModal(_index1,_index2){
				let length = 0 ;
				if(_index1==0){
					length=_index2
				}else{
					for (let i = 0; i < _index1; i++) {
						length = this.customerList[i].userList.length + length
					}
					length =length + _index2;
				}
				this.$refs.dropDownWindowRef[length].show = true
				console.log(this.$refs.dropDownWindowRef[length].showListData); 
				this.$refs.dropDownWindowRef[length].initShowListData()
			},
			changeLabels(_params){
				console.dir(_params);
				
				let id = this.customerList[_params.index1].userList[_params.index2].external_contact.external_userid
				let removeTagsId = this.customerList[_params.index1].userList[_params.index2].follow_info.tag_id
				let addTagsId = this.filtrationLabel(_params.arrData,'text')
				this.customerList[_params.index1].userList[_params.index2].labels = _params.arrData
				console.log(addTagsId);
				console.log(removeTagsId);
				this.upDateLabel(id,addTagsId,removeTagsId)
			},
			async upDateLabel(_id,add_tag,remove_tag){
				let res = await this.myhttp({
					url:'api/Label/editUserLabel',
					data:{
						external_userid:_id,
						add_tag,
						remove_tag,
					}
				}).then(res=>{
					if(res.data.code== 1 ){
						this.$refs.uToast.show({
								title: '修改成功',
								type: 'success',
						})
					    // this.getCustomersArr()
					}else{
						this.$refs.uToast.show({
								title: '修改失败',
								type: 'error',
						})
					}
				})
			},
			async getUserInfo(){
				// #ifdef MP-WEIXIN
				wx.qy.getAvatar ({
				      // type: 1,//1表示该userid是企业成员，2表示该userid是外部联系人
				      userid: "wmquFVCwAAnJS8IIrJbrPnDP20bSZrGw", //可以是企业成员，也可以是外部联系人
				      success: function(res) {
				        // 回调
						console.log(111);
						console.log(res);
				      }
				});
				// #endif
			},
		},
		components:{
			titleRow,dropDownWindow
		},
		async onLoad() {
			await this.getLabelArr()
			await this.getCustomersArr()
			// this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		 background-color: #f9f9f9;
		 
  		.head {
			  display: flex;
			  justify-content: space-between;
			  height: 90rpx;
			  align-items: center;
			  padding: 0 30rpx;
			  background-color: #fff;
    		.goBack {
				color: #444444;
    		}

    		.goNew {
				background: #0991FF;
				color: #fff;
				height: 60rpx;
				width: 120rpx;
				display: grid;
				place-items: center;
				border-radius: 4rpx;
    		}
  		}
		
		
  		.Item {
			height: calc( 100vh - 100rpx) ;
			width: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			
    		.title {
				
				titlerow {
				}
    		}

			.dataArr {
				margin: 5rpx 30rpx;
			  .dataItem {
					.date {
						color: #888888;
						font-size: 30rpx;
						margin: 20rpx 0 10rpx;
					}
			
					.userList {
						.userItem {
							display: flex;
							align-items: center;
							height: 136rpx;
							border-bottom: 1px solid #EEEEEE;
							.cover {
								image {
									width: 80rpx;
									height: 80rpx;
									border-radius: 50%;
								}
							}
					
							.content {
								flex: 1;
								height: 100%;
								display: flex;
								flex-direction: column;
								margin-left: 20rpx;
								justify-content: space-evenly;
								.name {
									color: #111111;
									font-size: 28rpx;
									font-weight: 400;
								}
						
								.labelArr {
									display: flex;
									.labelItem {
						
									}
								}
							}
							.addBtn{
								color: #2772FE;
							}
						}
					}
			 
			 }
			}

			.search {
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0px 1px 10px rgba(221, 221, 221, 0.5);
				border-radius: 28rpx;
				display: grid;
				place-items: center;
				margin: 0 20rpx 15rpx;
			}

    		.noContent {
				// background-color: #fff;
				flex: 1;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				height: 100%;
				image {
					width: 352rpx;
					height: 219rpx;
				}
    		}
  		}
	}
</style>
